<template>
    <div>
        <el-collapse accordion value="1">
        <el-collapse-item name="1">
            <template slot="title">
                <div class="one">
                    <i class="header-icon el-icon-info"></i>一级警报
                </div>
            </template>
             <el-row>
                 <el-col :span="8" v-for="(item,index) in I" :key="'a1'+index">
                    <Message :greenLand="item" @OK="OK()"></Message> 
                 </el-col>
             </el-row>
           
        </el-collapse-item>
        <el-collapse-item>
             <template slot="title">
                 <div class="two">
                    <i class="header-icon el-icon-info"></i>二级警报   
                 </div>
            </template>
            <el-row>
                 <el-col :span="8" v-for="(item,index) in II" :key="'a2'+index">
                    <Message :greenLand="item" @OK="OK()" ></Message> 
                 </el-col>
             </el-row>
        </el-collapse-item>
        <el-collapse-item>
             <template slot="title">
                 <div class="three">
                    <i class="header-icon el-icon-info"></i>三级警报
                 </div>
            </template>
           <el-row>
                 <el-col :span="8" v-for="(item,index) in III" :key="'a3'+index">
                    <Message :greenLand="item" @OK="OK()"></Message> 
                 </el-col>
             </el-row>
        </el-collapse-item>
        <el-collapse-item>
            <template slot="title">
                <div class="for">
                    <i class="header-icon el-icon-info"></i>四级警报
                </div>
            </template>
            <el-row>
                 <el-col :span="8" v-for="(item,index) in IIIV" :key="'a4'+index">
                    <Message :greenLand="item" @OK="OK()"></Message> 
                 </el-col>
             </el-row>
        </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { AxiosGet } from '../../axios';
import Message from "./Message.vue";
export default {
    name: 'WaringManageIndex',

    data() {
        return {
            I:[],
            II:[],
            III:[],
            IIIV:[]
        };
    },
    components:{Message},
    mounted() {
        this.initData()
    },

    methods: {
        initData(){
            this.I=[]
            this.II=[]
            this.III=[]
            this.IIIV=[]
            let greenList = this.$ls.get('greenLandList')
            greenList.forEach(element => {
                if(element.waringGrade == 1){
                    this.I.push(element)
                }
                if(element.waringGrade == 2){
                    this.II.push(element)
                }
                if(element.waringGrade == 3){
                    this.III.push(element)
                }
                if(element.waringGrade == 4 || element.waringGrade==null){
                    this.IIIV.push(element)
                }
            });
        },
        getAll(){
            return new Promise((resolve,reject)=>{
                AxiosGet('greenLand/findAll','').then(sucess=>{
                this.$ls.set('greenLandList',sucess.data,30*60*1000)
                resolve()
                }).catch(error=>{
                    reject()
                    console.log(error);
            })
            

        })},
        OK(){
            this.getAll().then(sucess=>{
                this.initData(sucess)
            })

        }
    },
};
</script>

<style scoped>
.one{
    font-size: 17px;
    color: red;
}
.two{
    font-size: 17px;
    color: rgb(194, 194, 4);
}
.three{
    font-size: 17px;
    color: green;
}
.for{
    font-size: 17px;
    color: blue;
}
</style>